<template>
  <div>
 
    <div class="container">

        <div class="item12">

            <div class="item1">
                <mymenu></mymenu>
            </div>

            <div class="item2">
                <!-- <a-button type="primary">********</a-button> -->

                <van-cell-group inset>
                <van-field
                  v-model="content"
                  rows="3"
                  autosize
                  label="帖子"
                  type="textarea"
                  placeholder="有什么新鲜事分享给大家"
                  
                />
                <!-- @input="aaa" -->

                <!-- 选择@哪个用户 -->
                <van-action-sheet v-model:show="show2" :actions="user" @select="onSelect" />  
                <!-- <van-notify v-model:show="show2" type="success" position="bottom">
                    <van-icon name="bell" style="margin-right: 4px;" />
                    <span>通知内容</span>
                  </van-notify> -->

              </van-cell-group>  <br>
              <div class="www">
                <van-dropdown-menu>
                        <van-dropdown-item v-model="value" :options="option1"/>
                </van-dropdown-menu>
              </div>
              <van-button @click="submit" size="small" color="linear-gradient(to right, #1BDB99, #278BF4)">发布</van-button>
                
              <div v-for="i,j in sublist" :key="j" style="width:100%;line-height: 20px;">
                
                  <div style="float: left;width:20%;height:100%;">
                    <van-image round width="3rem" height="3rem" :src="i.user.avtar" @click="get_userinfo(i.user.id)"></van-image>
                  </div>
                  <div style="float: left; width:80%;height:100%;">
                    <font color="484442"><div><a @click="get_userinfo(i.user.id)">{{i.user.email}}&emsp;&emsp;{{i.create_time}}</a></div>
                    <div>{{change_state(i.state)}}</div></font>
                    <div ><span v-html="i.content"></span></div>
                  </div>
                  <hr color="pink" size="4">
                  
             </div>
                <!-- <van-popup :show="show"  @click-overlay="show=false">
                 
                <div style="width:150px;height:200px;">  
                   <div> 头像：<van-image 
                        round
                        width="3rem"
                        height="3rem"
                        :src="user_info.avtar"
                      /> </div>
                    <div>邮箱：{{user_info.email}}</div>
          
                </div>
                 
    

                </van-popup> -->
        
            </div>


        </div>

    </div>

  </div>
</template>

<script>
// 导入子组件
import { time } from 'console';
import mymenu from '../components/menu.vue'

export default {
    
 data() {
    return {
        content:'',  //帖子内容
        value:0,    //帖子类型
        option1:[                     // 类型选择
                {'text':'公开','value':0},
                {'text':'粉丝可见','value':1},
                {'text':'好友可见','value':2},
                {'text':'仅自己','value':3},
                ],
        sublist:[],     //帖子列表
        show:false,
        user_info:{},
        user:[],
        show2:false,

    }

  },
  
  components:{
    mymenu
  },
  //监听属性
  watch:{
    content(){
       if(this.content.slice(-1) == '@'){
         this.myaxios(this.baseURL + 'atuser/','get').then(resp=>{
        console.log('获取@用户信息',resp)
        if(resp.errcode==0){
          this.user = resp.data
      
          this.show2 = true
        }
      })}
    }
  },
  methods:{
    // aaa(){
    //   if(this.content.slice(-1) == '@'){
    //      this.myaxios(this.baseURL + 'atuser/','get').then(resp=>{
    //     console.log('获取@用户信息',resp)
    //     if(resp.errcode==0){
    //       this.user = resp.data
    //       this.show2 = true
    //     }
    //   })


        
    //   }
    // },
    onSelect(value){
        this.content = this.content + value.name + '_ '
        this.show2 = false
    },
    
 
    // 帖子类型
    change_state:function(state){
      if(state==0){
        return '公开'
      }else if(state==1){
        return '粉丝可见'
      }else if(state==2){
        return '好友可见'
      }else{
        return '仅自己'
      }
    },
    submit:function(){   //发布帖子
    if(this.content == ''){
      this.$toast.fail('请先输入内容')
      return
    }
      this.myaxios(this.baseURL + 'sub/','post',{content:this.content,state:this.value}).then(resp=>{
        console.log('发布帖子',resp)
        if(resp.errcode==0){
          this.$toast.success(resp.msg)
          this.get_sub()
          this.content = ''
        }else{
          this.$toast.fail('发帖失败')
        }
      })
    },
    get_sub(){
      this.myaxios(this.baseURL + 'sub/','get').then(resp=>{
        console.log('获取帖子内容',resp)
        if(resp.errcode==0){
          this.sublist = resp.data

        }
      })
    },
    get_userinfo(id){
      
      window.location.href = '/userinfo?uid='+id

    }


  },
  mounted(){
    
  },
  created(){

    this.get_sub()

  }

}
</script>


<style scoped>
@import url('../assets/style.css');
.www{
  width: 20%;

}

</style>

